<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="9" :md="8" :sm="12" :xs="18">
        <el-input v-model="question" :disabled="askLoading" placeholder="询问你想知道的内容。例如:酒桶是法师吗？"/>
      </el-col>
      <el-col :span="3">
        <el-button @click="searchQuestion" type="primary" :loading="askLoading">提问</el-button>
      </el-col>
    </el-row>
    <el-row v-if="answer != ''">
      <h2>答案：{{answer}}</h2>
    </el-row>
    <el-col :span="24" v-if="graphData">
      <GraphEChart :data="graphData"/>
    </el-col>

  </div>
</template>

<script>
import { getAnswerData } from '@/api/KGQA'
import GraphEChart from '@/components/GraphEChart'
import { convertRelationshipDataToEChartData } from '@/echart/convertKGData'
export default {
  name: 'KGQA',
  components: {
    GraphEChart
  },
  data() {
    return {
      question: '',
      answer: '',
      askLoading: false,
      nodes: null,
      relationships: null,
      graphData: null,
      answerType: true
    }
  },
  methods: {
    async fetchAnswerData() {
      const params = {
        sentence: this.question
      }
      this.graphData = null
      const { data = null, success = false, message = "" } = await getAnswerData(params)
      this.askLoading = false
      if(!success) {
        this.$message.error(message)
        return
      }
      const { answer, answerType, relationships } = data
      this.answer = answer
      this.answerType = answerType
      if (answerType && relationships == null) {
        return
      }
      this.relationships = relationships
      this.graphData = convertRelationshipDataToEChartData(this.relationships)
    },
    searchQuestion() {
      if(this.question == '') {
        this.$message.error("内容不能为空")
        return
      }
      this.askLoading = true
      this.fetchAnswerData()
    }
  }
}
</script>

